import Vue from 'vue';

// 路由 vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import router from './router.js';

import app from './app.vue';

// 导入vue-resource
import VueResource from 'vue-resource';
Vue.use(VueResource);
// 全局配置主域名
Vue.http.options.root='http://vue.studyit.io';
Vue.http.options.emulateJSON=true;

// 导入tabbar组件
/* import {Header,Swipe,SwipeItem,Button} from 'mint-ui';
Vue.component(Header.name,Header);
Vue.component(Swipe.name,Swipe);
Vue.component(SwipeItem.name,SwipeItem);
Vue.component(Button.name,Button); */
// 加载时不显示loading图标，需要全局导入
/* import {Lazyload} from 'mint-ui';
Vue.use(Lazyload); */
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

// 导入mui的样式表
import './lib/css/mui.min.css';
import './lib/css/icons-extra.css';

// 导入moment
import moment from 'moment';
Vue.filter('dataFormat',function(dataStr,pattern='YYYY-MM-DD HH:mm:ss'){
    return moment(dataStr).format(pattern);
})

// vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

// 导入vuex
import Vuex from 'vuex';
// 注册
Vue.use(Vuex);

// 从localStorage中获取goodsinfo
// JSON.parse('[]') 结果为 []
var car=JSON.parse(localStorage.getItem('goodsinfo')||'[]');
// 创建Vuex.Store()实例，得到一个数据仓储对象
var store=new Vuex.Store({
    state:{ // 通过this.$store.state.***来访问数据
        goodsinfo:car
    },
    mutations:{ // 通过 this.$store.commit(方法，唯一的可选参数) 调用其中方法，只能在这里修改state中的数据
        addToCar(state,goods){
            // 将选中的商品信息加入购物车：
            // 通过id查找数组中是否有此商品，如果有其count+1
            // 没有，直接push到数组中（goodsinfo）
            var isIn=state.goodsinfo.some(item=>{
                if(item.id==goods.id){ // 如果查到
                    item.cou+=parseInt(goods.cou);
                    return true;
                }
            })
            // console.log(res);
            if(!isIn){ //没找到
                state.goodsinfo.unshift(goods);
            }
            console.log(state.goodsinfo)
            // 页面一刷新购物车清空，因为store是内存存储，放到localStorage中一份
            window.localStorage.setItem('goodsinfo',JSON.stringify(state.goodsinfo));
        },
        // 修改购物车中的数量--购物车页面点击时
        updateGoodsInfo(state,goods){
            state.goodsinfo.some(item=>{
                if(item.id==goods.id){
                    item.cou=parseInt(goods.cou);
                    return true;
                }
            })
            // 同步到localStorage中
            localStorage.setItem('goodsinfo',JSON.stringify(state.goodsinfo))
        },
        removeCar(state,id){
            state.goodsinfo.some((item,i)=>{
                if(item.id==id){
                    state.goodsinfo.splice(i,1);
                    return true;
                }   
            })
             // 同步到localStorage中
             localStorage.setItem('goodsinfo',JSON.stringify(state.goodsinfo))
        },
        updateSelected(state,info){
            state.goodsinfo.some(item=>{
                if(item.id==info.id){
                    item.selected=info.selected;
                    return true;
                }              
            })
            localStorage.setItem('goodsinfo',JSON.stringify(state.goodsinfo));
        }
    },
    getters:{ // 通过 this.$store.getters.** 访问其中的数据，只要state中的数据一发生变化就会自动更新其中的方法求值
        totalcount:function(state){
            var total=0;
            state.goodsinfo.forEach(item=>{
                if(item.selected){
                    total+=item.cou;
                }
                
            })
            return total;
        },
        // 根据商品id从购物车获取商品的数量？
        // 由于是v-for渲染，所以id值必须是对象的键，数量必须是对象的值，才可以根据id渲染不同的数量
        getGoodsCount:function(state){
            var c={};
            state.goodsinfo.forEach(item=>{
                c[item.id]=item.cou;
            })
            return c;
        },
        // 获取商品是否选中，根据id
        getGoodsSelected:function(state){
            var o={};
            state.goodsinfo.forEach(item=>{
                o[item.id]=item.selected;
            })
            return o;
        },
        getGoodsCountAndAmount:function(state){
            var o={cou:0,amount:0};
           
            state.goodsinfo.forEach(item=>{                
                if(item.selected){                  
                    o.cou+=item.cou;
                    o.amount+=item.cou*item.sell_price
                }                
            })          
            return o;
            
        }
    }
})

var vm=new Vue({
    el:'#app',
    data:{},
    methods:{},
    render:c=>c(app),
    router,
    store // 挂载store状态管理对象
})